<script setup lang="ts">
import {ref,shallowRef,triggerRef,customRef} from 'vue'
const changeName = () => {
  message.value='提高竞争力';
  console.log('click')
}
const message = myRef('不进则退');
function myRef<T>(value:T){
  return customRef((trank,trigger) => {
    return {
      get(){
        console.log('get')
        trank();
        return value;
      },
      set(newValue){
        console.log('set',newValue);
        value = newValue;
        trigger();
      }
    }
  })
}

</script>

<template>
<div>{{message}}</div>
<button @click="changeName">change</button>
<h2>路由链接列表</h2>
<ul>
  <li>
    <router-link to="/">HelloWorld</router-link>
  </li>
  <li>
    <router-link to="/pinia">SimplePinia</router-link>
    <ul>
      <li>
        <router-link to="/pinia/StoreToRefs">StoreToRefs</router-link>
      </li>
      <li>
        <router-link to="/pinia/ModifyStore">ModifyStore</router-link>
      </li>
      <li>
        <router-link to="/pinia/StorageStore">StorageStore</router-link>
      </li>
      <li>
        <router-link to="/pinia/Getters">Getters</router-link>
      </li>
      <li>
        <router-link to="/pinia/UseOtherStore">UseOtherStore</router-link>
      </li>
      <li>
        <router-link to="/pinia/GetterFun">GetterFun</router-link>
      </li>
      <li>
        <router-link to="/pinia/UseAction">UseAction</router-link>
      </li>
      <li>
        <router-link to="/pinia/UsePlugin">UsePlugin</router-link>
      </li>
      <li>
        <router-link to="/pinia/ActionDebounce">ActionDebounce</router-link>
      </li>
      <li>
        <router-link to="/pinia/PersistPlugin">PersistPlugin</router-link>
      </li>
    </ul>
  </li>
  <li>
    <router-link to="/modelValue">ModelValue</router-link>
  </li>
  <li>
    <router-link to="/CRUD">CRUD</router-link>
  </li>
</ul>
<h2>路由页面详情</h2>
<router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
